/* pages/communication/communication.wxss */
/* pages/communication/communication.wxss */
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f8f8f8; /* 轻柔的背景颜色 */
}

.back-button {
  position: fixed;
  top: 0; /* 修改为0，让返回按钮紧贴顶部 */
  left: 0; /* 修改为0，让返回按钮紧贴左侧 */
  z-index: 20; /* 提高z-index，确保返回按钮在标题之上 */
  padding: 8px 15px;
  background-color: #ffffff;
  border: 1px solid #ddd; /* 轻边框增加层次感 */
  border-radius: 100px; /* 圆角按钮 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加轻微阴影 */
}

.message-container {
  flex: 1;
  padding: 50px 10px 70px; /* 调整底部空间，为输入框留出更多空间 */
  overflow-y: auto; /* 添加滚动条，防止内容溢出 */
}

.message-row {
  display: flex;
  margin-bottom: 15px;
}

.message-cell {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%; /* 完全圆形头像 */
  margin-right: 15px;
  margin-left: 15px;
}

.message-bubble {
  max-width: 70%;
  background-color: #e6e6e6;
  border-radius: 10px;
  padding: 12px;
  position: relative;
  word-wrap: break-word;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加轻微阴影 */
}

.left-bubble {
  margin-left: 15px;
  border-bottom-left-radius: 0; /* 调整左边的圆角 */
}

.right-bubble {
  background-color: #4cd964; /* 更现代的绿色 */
  margin-right: 15px;
  border-bottom-right-radius: 0; /* 调整右边的圆角 */
}

.input-container {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px; /* 输入框和发送按钮的总高度 */
  background-color: #ffffff;
  padding: 10px;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); /* 更明显的阴影效果 */
}

.input-field {
  flex: 1;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 10px;
  margin-right: 10px;
  font-size: 16px; /* 更大的字体大小 */
}

.send-button {
  background-color: #1AAD19;
  color: white;
  border-radius: 10px;
  padding: 10px 15px;
  font-size: 16px; /* 更大的字体大小 */
  flex: 1; /* 使发送按钮的高度与输入框一致 */
}
/* 调整买家的头像紧贴右侧 */
.message-cell.buy {
  justify-content: flex-end;
}

.message-cell.buy .avatar {
  margin-right: 0;
  margin-left: 15px;
}

/* 发送的消息显示为绿色并放在最右边 */
.message-cell.buy .message-bubble {
  background-color: #4cd964;
  border-bottom-right-radius: 10px; /* 恢复右边的圆角 */
}

/* 其他人发送的消息显示为默认样式并放在最左边 */
.message-cell.sell .message-bubble {
  background-color: #e6e6e6;
  border-bottom-left-radius: 10px; /* 恢复左边的圆角 */
}

.title-fixed {
  margin-top: 20px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10; /* 确保标题在滚动视图之上，但低于返回按钮 */
  background-color: #f8f8f8; /* 背景颜色 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加轻微阴影 */
}

.title {
  text-align: center;
  font-size: 20px;
  padding: 15px;
  font-weight: bold; /* 加粗标题 */
  /* 移除原来的背景颜色，因为已经在父容器中设置了 */
}